<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width:500px;
            height: 500px;
            font-size:20px;
        }
        /*1.第一种长度: px，像素*/
        /*2.第二种长度: em, 大小相对于font-size的倍数.如font-size:kpx; width: 20em =>width=20*kpx
            
            如果没有写font-size,就去找其父亲，父亲没有再找父亲的父亲，直到找到html标签，浏览器默认
            的字体大小就是html标签。
            
            如果font-size也写成em，则也会一直向上去父亲，最多到html标签，采用默认字体大小*/
        .p1{
            width:10em;
            height:10em;
            font-size:20px;
            background-color: blue;
        }
        /*3.第三种长度: rem，相对根字体大小,html标签就是根，即倍数采用的是html字体大小的倍数。*/
        .p2{
            width:10rem;
            height:10rem;
            font-size:20px;
            background-color: orange;
        }
        /*4.第四种长度: %，大小按照对应父元素的字体计算*/
        .p3{
            width:50%;
            height:50%;
            font-size:50%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="p">
        <div class="p1">
            崩坏三
        </div>
        <hr>
        <div class="p2">
            明日方舟
        </div>
        <hr>
        <div class="p3">
            碧蓝航线
        </div>
    </div>

</body>
</html>